<!--
 * @Author: lihaogn
 * @Date: 2023-04-25 00:15:08
 * @LastEditTime: 2023-04-25 00:15:12
 * @LastEditor: lihaogn
 * @Description: 
 * @FilePath: \lix-practice-css\霓虹灯文本效果\index.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>【每日一练】172—彩色灯光文本效果</title>
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <img class="bottom" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/756881/Artboard%201.svg" />
  <svg class="top" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    preserveAspectRatio="none" viewBox="0 0 970 250">
    <defs>
      <mask id="mask">
        <g class="right">
          <rect fill="#fff" class="1" x="0" y="-0.1" width="51" height="251" />
          <rect fill="#fff" class="1" x="487.1" y="0" width="51" height="251" />
        </g>
        <g class="right">
          <rect fill="#fff" class="2" x="45.1" y="0" width="51" height="251" />
          <rect fill="#fff" class="2" x="533.3" y="0" width="51" height="251" />
        </g>
        <g class="right">
          <rect fill="#fff" class="3" x="94.6" y="0" width="51" height="251" />
          <rect fill="#fff" class="3" x="583.9" y="0" width="51" height="251" />
        </g>
        <g class="right">
          <rect fill="#fff" class="4" x="634.4" y="0" width="51" height="251" />
          <rect fill="#fff" class="4" x="143.9" y="0" width="51" height="251" />
          <rect fill="#fff" class="4" x="671.9" y="0" width="49.5" height="250" />
        </g>
        <g class="left">
          <rect fill="#fff" class="9" x="422.4" y="0" width="51" height="251" />
          <rect fill="#fff" class="9" x="919.4" y="0.1" width="51" height="251" />
        </g>
        <g class="left">
          <rect fill="#fff" class="5" x="224.8" y="0" width="51" height="251" />
          <rect fill="#fff" class="5" x="717.2" y="0" width="51" height="251" />
          <rect fill="#fff" class="5" x="448.5" y="-0.1" width="49.5" height="250" />
        </g>
        <g class="left">
          <rect fill="#fff" class="6" x="274.3" y="0" width="51" height="251" />
          <rect fill="#fff" class="8" x="373.1" y="0" width="51" height="251" />
          <rect fill="#fff" class="6" x="767.8" y="0" width="51" height="251" />
          <rect fill="#fff" class="8" x="868.9" y="0.1" width="51" height="251" />
        </g>
        <g class="left">
          <rect fill="#fff" class="7" x="323.6" y="0" width="51" height="251" />
          <rect fill="#fff" class="7" x="818.3" y="0" width="51" height="251" />
          <rect fill="#fff" class="7" x="179.9" y="-0.1" width="49.5" height="250" />
        </g>
      </mask>
    </defs>
    <g mask="url(#mask)">

      <g>
        <path class="text-fill" d="M26,199.8c-6.9-7.2-10.3-17.1-10.3-29.6V97.7c0-15.6,3.1-27.4,9.3-35.3c6.2-7.9,16-11.9,29.3-11.9
    c11.6,0,20.9,3.2,28,9.5c7.1,6.3,10.6,15.5,10.6,27.5v27.1H61.6V91.3c0-4.5-0.5-7.6-1.6-9.3c-1.1-1.7-3-2.6-5.7-2.6
    c-2.8,0-4.7,1-5.8,2.9c-1,2-1.6,4.8-1.6,8.6v78.9c0,4.1,0.6,7.2,1.8,9.1c1.2,1.9,3,2.8,5.5,2.8c4.9,0,7.3-4,7.3-11.9v-28.4h31.7
    V171c0,26.4-13.2,39.5-39.7,39.5C42.1,210.6,32.9,207,26,199.8z" />
        <path class="text-fill" d="M112.3,199c-6.6-7.7-9.9-18.6-9.9-32.7V91.4c0-13.5,3.3-23.8,9.9-30.7c6.6-6.9,16.2-10.3,28.9-10.3
    c12.7,0,22.3,3.4,28.9,10.3c6.6,6.9,9.9,17.1,9.9,30.7v74.8c0,14.2-3.3,25.1-9.9,32.8c-6.6,7.7-16.2,11.5-28.9,11.5
    C128.5,210.6,118.9,206.7,112.3,199z M146.9,178c1-2.4,1.5-5.9,1.5-10.2V90.9c0-3.4-0.5-6.2-1.4-8.3c-0.9-2.1-2.8-3.2-5.6-3.2
    c-5.2,0-7.9,4-7.9,11.9v76.7c0,4.5,0.5,7.9,1.6,10.2c1.1,2.3,3.1,3.5,6,3.5C144,181.7,145.9,180.4,146.9,178z" />
        <path class="text-fill" d="M201.2,199c-6.6-7.7-9.9-18.6-9.9-32.7V91.4c0-13.5,3.3-23.8,9.9-30.7c6.6-6.9,16.2-10.3,28.9-10.3
    c12.7,0,22.3,3.4,28.9,10.3c6.6,6.9,9.9,17.1,9.9,30.7v74.8c0,14.2-3.3,25.1-9.9,32.8c-6.6,7.7-16.2,11.5-28.9,11.5
    C217.5,210.6,207.8,206.7,201.2,199z M235.8,178c1-2.4,1.5-5.9,1.5-10.2V90.9c0-3.4-0.5-6.2-1.4-8.3c-0.9-2.1-2.8-3.2-5.6-3.2
    c-5.2,0-7.9,4-7.9,11.9v76.7c0,4.5,0.5,7.9,1.6,10.2c1.1,2.3,3.1,3.5,6,3.5C233,181.7,234.8,180.4,235.8,178z" />
        <path class="text-fill" d="M281.6,209.1V51.9H313v130.5h32.4v26.7H281.6z" />
        <path class="text-fill" d="M392.8,209.1L408,51.9h53.3l15,157.2h-29.8l-2.2-25.4h-19l-1.8,25.4H392.8z M427.6,158.6h14.3l-7-80h-1.5
    L427.6,158.6z" />
        <path class="text-fill" d="M492.2,200c-6.3-7.1-9.5-18.5-9.5-34.2v-15.4h30.9v19.6c0,7.8,2.5,11.7,7.5,11.7c2.8,0,4.8-0.8,5.9-2.5
    c1.1-1.6,1.6-4.4,1.6-8.3c0-5.1-0.6-9.4-1.8-12.7c-1.2-3.4-2.8-6.2-4.7-8.4c-1.9-2.3-5.3-5.8-10.2-10.5l-13.5-13.5
    c-10.5-10.2-15.7-21.6-15.7-34c0-13.4,3.1-23.6,9.2-30.7c6.2-7,15.2-10.5,27-10.5c14.2,0,24.3,3.8,30.6,11.3
    c6.2,7.5,9.3,19.2,9.3,35.2h-32l-0.2-10.8c0-2.1-0.6-3.7-1.7-4.9c-1.2-1.2-2.8-1.8-4.8-1.8c-2.4,0-4.3,0.7-5.5,2
    c-1.2,1.3-1.8,3.2-1.8,5.5c0,5.1,2.9,10.4,8.8,15.9l18.3,17.6c4.3,4.1,7.8,8.1,10.6,11.8c2.8,3.7,5.1,8.1,6.8,13.2
    c1.7,5.1,2.6,11.1,2.6,18c0,15.5-2.8,27.2-8.5,35.2c-5.7,8-15,12-28.1,12C508.8,210.6,498.5,207,492.2,200z" />
        <path class="text-fill" d="M613,209.1V51.9h31.3v56.2h14.8V51.9h31.3v157.2h-31.3v-71.4h-14.8v71.4H613z" />
        <path class="text-fill" d="M704.3,209.1V51.9h63v30.4h-30.9v30.6H766v29.6h-29.6v36.1h32.9v30.6H704.3z" />
        <path class="text-fill" d="M788.7,199.8c-6.9-7.2-10.3-17.1-10.3-29.6V97.7c0-15.6,3.1-27.4,9.3-35.3c6.2-7.9,16-11.9,29.3-11.9
    c11.6,0,20.9,3.2,28,9.5c7.1,6.3,10.6,15.5,10.6,27.5v27.1h-31.3V91.3c0-4.5-0.5-7.6-1.6-9.3c-1.1-1.7-3-2.6-5.7-2.6
    c-2.8,0-4.7,1-5.8,2.9c-1,2-1.6,4.8-1.6,8.6v78.9c0,4.1,0.6,7.2,1.8,9.1c1.2,1.9,3,2.8,5.5,2.8c4.9,0,7.3-4,7.3-11.9v-28.4H856V171
    c0,26.4-13.2,39.5-39.7,39.5C804.8,210.6,795.6,207,788.7,199.8z" />
        <path class="text-fill"
          d="M866.4,209.1V51.9h31.1v63l14.6-63h31.7l-17.6,71.9l21.2,85.3h-32.6L897.7,133v76.1H866.4z" />
      </g>
    </g>
  </svg>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js'></script>
  <script src="./script.js"></script>

</body>

</html>